import React, { useState, useEffect } from "react";
import { Tabs, Empty } from "react-vant";
import H_login from "../../uits/H_login";
import {useNavigate,useLocation} from 'react-router-dom'
import axios from "../../axios/index";
type Props = {};

const Cfig = (props: Props) => {
  const [data, setData]: any = useState([]);
  const location=useLocation()
  const navigate=useNavigate()
  useEffect(() => {
    (async () => {
      let res = await axios.get("http://localhost:8080/getofglist");
      console.log(res.data);
      setData(res.data);
    })();
  }, []);
  const del = (item: any) => {
    axios.delete(`http://localhost:8080/delofglist/${item.id}`).then((res) => {
      setData(res.data);
    });
  };
  const ddxq=(item:any)=>{
    navigate('/od/'+item.id,{state:item})
  }
  return (
    <div className="cfigs">
      <div className="cfigs_title">全部订单</div>
      <div>
        <div className="demo-tabs">
          <Tabs defaultActive={0}>
            <Tabs.TabPane title={"全部"}>
              {data.length > 0 ? (
                data &&
                data.map((item: any, index: any) => {
                  return (
                    <div className="nr" key={index} >
                      <ul onClick={()=>ddxq(item)}>
                        <li>合肥南-南京南 G7740</li>
                        <li>03车厢19A号 {item.name}</li>
                        <li>2022-06-15  06:24 至 07:14</li>

                      </ul>
                      <ul>
                        <li style={{ color: "green" }}>￥{item.price}</li>
                        <li
                          className={
                            item.teg == "出票成功" ? "active" : "active1"
                          }
                        >
                          {item.teg}
                        </li>
                        <li>
                          <button onClick={() => del(item)}>删除订单</button>
                        </li>
                      </ul>
                    </div>
                  );
                })
              ) : (
                <Empty description="数据为空" />
              )}
            </Tabs.TabPane>
            <Tabs.TabPane title={"待出行"}>
              {data.length>0?data &&
                data.map((item: any, index: any) => {
                 if(item.teg==="出票成功"){
                  return  <div className="nr" key={index}>
                  <ul>
                    <li>{item.title}</li>
                    <li>{item.number}</li>
                    <li>{item.date}</li>
                  </ul>
                  <ul>
                    <li style={{ color: "green" }}>￥{item.price}</li>
                    <li
                      className={
                        item.teg == "出票成功" ? "active" : "active1"
                      }
                    >
                      {item.teg}
                    </li>
                    <li>
                      <button onClick={() => del(item)}>删除订单</button>
                    </li>
                  </ul>
                </div>
                 }
                }):"暂无数据"}
            </Tabs.TabPane>
            <Tabs.TabPane title={"待支付"}>
            {data.length>0?data &&
                data.map((item: any, index: any) => {
                 if(item.teg==="待支付"){
                  return  <div className="nr" key={index}>
                  <ul>
                    <li>{item.title}</li>
                    <li>{item.number}</li>
                    <li>{item.date}</li>
                  </ul>
                  <ul>
                    <li style={{ color: "green" }}>￥{item.price}</li>
                    <li
                      className={
                        item.teg == "出票成功" ? "active" : "active1"
                      }
                    >
                      {item.teg}
                    </li>
                    <li>
                      <button onClick={() => del(item)}>删除订单</button>
                    </li>
                  </ul>
                </div>
                 }
                }):"暂无数据"}
            </Tabs.TabPane>
            <Tabs.TabPane title={"退款/已取消"}>
            {data.length>0?data &&
                data.map((item: any, index: any) => {
                 if(item.teg==="出票失败"||item.teg==="已取消"){
                  return  <div className="nr" key={index}>
                  <ul>
                    <li>{item.title}</li>
                    <li>{item.number}</li>
                    <li>{item.date}</li>
                  </ul>
                  <ul>
                    <li style={{ color: "green" }}>￥{item.price}</li>
                    <li
                      className={
                        item.teg == "出票成功" ? "active" : "active1"
                      }
                    >
                      {item.teg}
                    </li>
                    <li>
                      <button onClick={() => del(item)}>删除订单</button>
                    </li>
                  </ul>
                </div>
                 }
                }):"暂无数据"}
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
};

export default H_login(Cfig);
